<template>
  <div class="page">
    <el-card style="margin-top: 10px; margin-left: 20px; margin-right: 20px; font-size: 14px">
      <div slot="header"><span>文件下载</span></div>
      <el-col :span="24" style="margin-top: 10px; padding-bottom: 20px">
        <el-table :data="portraitList">
          <el-table-column label="用户手册" prop="fileName" />
          <el-table-column label="操作" align="center" width="150px" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <!-- <span @click="checkdownload(scope.row)" class="focus">下载</span> -->
              <el-button @click="checkdownload(scope.row)" size="small" :loading="isDownload">下载</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-card>
  </div>
</template>
  
  <script>
import downloadutil from '@/api/system/sim/downloadutil'


export default {

  data () {
    return {
      portraitList: [{
        "fileName": "广西移动网络成本费用稽核系统用户使用手册V1.0.docx",
        "url": "https://api.cqrzltech.com/system/profile/word/广西移动网络成本费用稽核系统用户使用手册V1.0.docx",
        "path": "/profile/file/广西移动网络成本费用稽核系统用户使用手册V1.0.docx"
      }, {
        "fileName": "APP操作说明.docx",
        "url": "https://api.cqrzltech.com/system/profile/word/APP操作说明.docx",
        "path": "/profile/file/APP操作说明.docx"
      }, {
        "fileName": "稽核助手插件说明.docx",
        "url": "https://api.cqrzltech.com/system/profile/word/稽核助手插件说明.docx",
        "path": "/profile/file/稽核助手插件说明.docx"
      }],
      isDownload: false,
    }
  },
  methods: {

    checkdownload (row) {
      const message = this.$message({
        type: "warning",
        message: "下载中,请稍等...",
        duration: 0,
      });
      // this.isDownload = true
      let url = `/common/download/resource?resource=` + row.url;
      downloadutil.getFile(url, { fileName: row.fileName })
        .then((res) => {
          message.close();
          // this.isDownload = false
        })
        .catch((err) => {
          message.close();
          // this.isDownload = false
        })
      // this.$download.resource(row.path);
      // message.close();
    },
  }
}
  </script>
  
  <style scoped lang="scss">
.page {
  padding: 10px 10px;

  .top {
    margin-top: -10px;
    padding: 20px;
    height: 60px;
    position: fixed;
    width: 100%;
    z-index: 500;
    background-color: white;
    border-bottom: 1px solid #eee;
    display: flex;
  }
}

.page .li {
  float: left;
  text-align: center;
  width: 25%;
  padding: 10px;
  font-size: 15px;
  color: #999;
}

.da {
  float: left;
  width: 14%;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  word-break: break-all;
  margin-bottom: 10px;
  color: black !important;
  font-family: 'Courier New', Courier, monospace;
}
</style>
  